<template>
  <div style="flex">
    <Home_head></Home_head>
<div class="problems">
  <div style="background-color: #fff; width: 220px; height: 180px;  border: #eee 1px solid; border-radius:1px; position: absolute; top: 90px; right: 50px;">
    <div style="background-color: rgb(19, 159, 190); height: 30px;width: 100%; color: #fff;">每日推荐</div>
    <div style="margin: 20px;" v-for="count  in DailyList.length" :key="count">
      <span @click="toproblem2(count-1)">{{ DailyList[count-1] }}</span>
    </div>
  </div>
  <div class="RankList">
    <div style="background-color: #eee; width: 100%; height: 35px;">推荐题目</div>
    <div style="background-color: #fff; width: 100%; height: 240px;">
      <el-table
    :data="recommends"
    stripe
    style="width: 100%">
    <el-table-column
      prop="state"
      label="状态"
      width="100" >
      <template slot-scope="scope">
       <div v-if="scope.row.state==1">
        <i class="el-icon-circle-check"></i>
        <span style="margin-left: 10px; color: rgb(47, 255, 47);">通过</span>
       </div>
       <div v-if="scope.row.state==0">
        <i class="el-icon-position"></i>
        <span style="margin-left: 10px; color: rgb(237, 187, 23);">测试过</span>
       </div>
       <div v-if="scope.row.state==2">
        <i class="el-icon-circle-close"></i>
        <span style="margin-left: 10px; color: red;">未通过</span>
       </div>
       <div v-if="scope.row.state==null">
        
       </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="topic"
      label="题目"
    >
    <template slot-scope="scope">
            <div  @click="toproblem(scope.row.id)">
              {{ scope.row.topic}}
            </div>
        </template>
    </el-table-column>
    <el-table-column
      prop="submitNum"
      label="提交人数">
    </el-table-column>
    <el-table-column
      prop="successesNum"
      label="通过人数">
    </el-table-column>
    <el-table-column
      prop="passingRate"
      label="通过率">
    </el-table-column>
    <el-table-column
      prop="difficulty"
      label="难度">
      <template slot-scope="scope">
       <div v-if="scope.row.difficulty=='简单'">
        <span style="margin-left: 10px; color: rgb(19, 190, 36);">{{ scope.row.difficulty }}</span>
       </div>
       <div v-if="scope.row.difficulty=='中等'">
        <span style="margin-left: 10px; color: rgb(237, 187, 23);">{{ scope.row.difficulty }}</span>
       </div>
       <div v-if="scope.row.difficulty=='困难'">
        <span style="margin-left: 10px; color: #e09191;">{{ scope.row.difficulty }}</span>
       </div>
       <div v-if="scope.row.difficulty=='极难'">
        <span style="margin-left: 10px; color: red;">{{ scope.row.difficulty }}</span>
       </div>
      </template>
    </el-table-column>
  </el-table>
    </div>
  </div>


<div class="Allselect_suji">
<el-select v-model="difficulty" placeholder="难度" style="width: 90px; margin-left: 10px;" @change="changeDifficulty()">
    <el-option
      v-for="item in difficultys"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  
  <input class="srach1" placeholder="搜索的题目或者编号" @keyup.enter="sreachProblem()" v-model="searchcontent">
  <button class="random1" @click="RandomProblem()"><i class="el-icon-refresh" style="color: #fff; margin-right: 5px;"></i>随机一题</button>
</div>

<div class="all_problem1" v-if="oneortwo">
  <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="state"
      label="状态"
      width="100" >
      <template slot-scope="scope">
       <div v-if="scope.row.state==1">
        <i class="el-icon-circle-check"></i>
        <span style="margin-left: 10px; color: rgb(19, 190, 36);">通过</span>
       </div>
       <div v-if="scope.row.state==0">
        <i class="el-icon-position"></i>
        <span style="margin-left: 10px; color: rgb(237, 187, 23);">未通过</span>
       </div>
       <div v-if="scope.row.state==null">
        
       </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="topic"
      label="题目"
    >
    <template slot-scope="scope">
            <div  @click="toproblem(scope.row.id)">
              {{ scope.row.topic}}
            </div>
        </template>
    </el-table-column>
    <el-table-column
      prop="submitNum"
      label="提交人数">
    </el-table-column>
    <el-table-column
      prop="successesNum"
      label="通过人数">
    </el-table-column>
    <el-table-column
      prop="passingRate"
      label="通过率">
    </el-table-column>
    <el-table-column
      prop="difficulty"
      label="难度">
      <template slot-scope="scope">
       <div v-if="scope.row.difficulty=='简单'">
        <span style="margin-left: 10px; color: rgb(19, 190, 36);">{{ scope.row.difficulty }}</span>
       </div>
       <div v-if="scope.row.difficulty=='中等'">
        <span style="margin-left: 10px; color: rgb(237, 187, 23);">{{ scope.row.difficulty }}</span>
       </div>
       <div v-if="scope.row.difficulty=='困难'">
        <span style="margin-left: 10px; color: #e09191;">{{ scope.row.difficulty }}</span>
       </div>
       <div v-if="scope.row.difficulty=='极难'">
        <span style="margin-left: 10px; color: red;">{{ scope.row.difficulty }}</span>
       </div>
      </template>
    </el-table-column>
  </el-table>
  <div style="text-align: center; margin: 20px">
  <el-pagination
    background
    @current-change="handleCurrentChange"
    layout="prev, pager, next"
    :total="total">
  </el-pagination>
  </div>
</div>
<div class="all_problem2" v-if="!oneortwo">
  <el-table
    :data="tableData2"
    stripe
    style="width: 100%">
    <el-table-column
      prop="state"
      label="状态"
      width="100" >
      <template slot-scope="scope">
       <div v-if="scope.row.state==1">
        <i class="el-icon-circle-check"></i>
        <span style="margin-left: 10px; color: rgb(19, 190, 36);">通过</span>
       </div>
       <div v-if="scope.row.state==0">
        <i class="el-icon-position"></i>
        <span style="margin-left: 10px; color: rgb(237, 187, 23);">未通过</span>
       </div>
       <div v-if="scope.row.state==null">
        
       </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="topic"
      label="题目"
    >
    <template slot-scope="scope">
            <div  @click="toproblem(scope.row.id)">
              {{ scope.row.topic}}
            </div>
        </template>
    </el-table-column>
    <el-table-column
      prop="submitNum"
      label="提交人数">
    </el-table-column>
    <el-table-column
      prop="successesNum"
      label="通过人数">
    </el-table-column>
    <el-table-column
      prop="passingRate"
      label="通过率">
    </el-table-column>
    <el-table-column
      prop="difficulty"
      label="难度">
      <template slot-scope="scope">
       <div v-if="scope.row.difficulty=='简单'">
        <span style="margin-left: 10px; color: rgb(19, 190, 36);">{{ scope.row.difficulty }}</span>
       </div>
       <div v-if="scope.row.difficulty=='中等'">
        <span style="margin-left: 10px; color: rgb(237, 187, 23);">{{ scope.row.difficulty }}</span>
       </div>
       <div v-if="scope.row.difficulty=='困难'">
        <span style="margin-left: 10px; color: #e09191;">{{ scope.row.difficulty }}</span>
       </div>
       <div v-if="scope.row.difficulty=='极难'">
        <span style="margin-left: 10px; color: red;">{{ scope.row.difficulty }}</span>
       </div>
      </template>
    </el-table-column>
  </el-table>
</div>
</div>
</div>
  
</template>

<script>
import axios from "axios"
import Home_head from "@/components/Home_head.vue";
export default {
    components: { Home_head },
    data() {
        return {
          page:1,
          total:0,
            difficultys: [{
                    value: "选项1",
                    label: "简单"
                }, {
                    value: "选项2",
                    label: "中等"
                }, {
                    value: "选项3",
                    label: "困难"
                }, ],
            difficulty: "",
            states: [{
                    label: "通过"
                }, {
                    label: "未通过"
                }, {
                    label: "测试过"
                },],
            state: "",
            value2: [],
            searchcontent:"",
            tableData: [{
                    state: "0",
                    topic: "两数之和",
                    submitNum: 0,
                    successesNum: 0,
                    passingRate: "22%",
                    difficulty: "简单",
                }, {
                    state: "1",
                    topic: "八皇后",
                    submitNum: 0,
                    successesNum: 0,
                    passingRate: "13%",
                    difficulty: "困难",
                }, {
                    state: "1",
                    topic: "背包问题",
                    submitNum: 0,
                    successesNum: 0,
                    passingRate: "26%",
                    difficulty: "中等",
                }, {
                    state: "2",
                    topic: "旅行商问题",
                    submitNum: 0,
                    successesNum: 0,
                    passingRate: "12%",
                    difficulty: "极难",
                },],
            tableData2:[],
            oneortwo:true,
            recommends:[],
            DailyList:[],
        };
    },
    created: function () {
        this.allOJ();
        this.recommend();
        this.DailyRecommend();
    },
    methods: {
      DailyRecommend(){
        axios.post('/DailyRecommend').then(response =>
              {
                this.DailyList=response.data
              })
      },
          
      
      allOJ() {
      if(localStorage.getItem("user_Token")==null){
        axios.post('/commonOj',{StartingNumber:1}).then(response =>
              {
                this.tableData = response.data.ojDtos;
                this.total=response.data.total
              })
        }else{
          axios.post('/parseToken',
          {user_token : localStorage.getItem("user_Token")}).then(
            response =>{
            if(response.data.isExpire==true){
              axios.post("/getAllOJ",{user_token:localStorage.getItem("user_Token"),StartingNumber:1}).then((response) => {
                this.tableData = response.data.ojDtos;
                this.total=response.data.total
            });
            }else{
              axios.post('/commonOj',{StartingNumber:1}).then(response =>
              {
                this.tableData = response.data.ojDtos;
                this.total=response.data.total
              })
            }
          })
         }
        },
    handleCurrentChange(val) {
      this.page = val;
      if(localStorage.getItem("user_Token")==null){
        axios.post('/commonOj',{StartingNumber:val-0}).then(response =>
              {
                this.tableData.splice(0,this.tableData.length)
                for (let i = 0; i < response.data.ojDtos.length; i++) {
                  this.tableData.push(response.data.ojDtos[i]);
                }
              })
        }else{
          axios.post('/parseToken',
          {user_token : localStorage.getItem("user_Token")}).then(
            response =>{
            if(response.data.isExpire==true){
              axios.post("/getAllOJ",{user_token:localStorage.getItem("user_Token"),StartingNumber:val-0}).then((response) => {
                this.tableData.splice(0,this.tableData.length)
                for (let i = 0; i < response.data.ojDtos.length; i++) {
                  this.tableData.push(response.data.ojDtos[i]);
                }
            });
            }else{
              axios.post('/commonOj',{StartingNumber:val-0}).then(response =>
              {
                this.tableData.splice(0,this.tableData.length)
                for (let i = 0; i < response.data.ojDtos.length; i++) {
                  this.tableData.push(response.data.ojDtos[i]);
                }
              })
            }
          })
         }
    },
    toproblem(id){
      axios.post("/problemInfo",{oj_id:id}).then((response) =>{
        this.$router.push({path:"/problem",query:{msg:response.data.msg,CTemplateCode:response.data.CTemplateCode,id:id}})
      })
    },
    toproblem2(count){
      axios.post("/problemInfo2",{oj_topic:this.DailyList[count]}).then((response) =>{
        this.$router.push({path:"/problem",query:{msg:response.data.msg,CTemplateCode:response.data.CTemplateCode,id:id}})
      })
    },
    RandomProblem(){
        var randomIndex =Math.floor(Math.random()*this.total)
        axios.post("/problemInfo",{oj_id:randomIndex}).then((response) =>{
        this.$router.push({path:"/problem",query:{msg:response.data.msg,CTemplateCode:response.data.CTemplateCode,id:randomIndex}})
      })
    },
    recommend(){
      if(localStorage.getItem("user_Token")==null){
        axios.post('/recommendByNum').then(response =>
              {
                this.recommends=response.data
              })
        }else{
          axios.post('/parseToken',
          {user_token : localStorage.getItem("user_Token")}).then(
            response =>{
            if(response.data.isExpire==true){
              axios.post('/recommend',{user_token : localStorage.getItem("user_Token")}).then(response =>
              {
                this.recommends=response.data
              })
            }else{
              axios.post('/recommendByNum').then(response =>
              {
                console.log(response.data)
                this.recommends=response.data
              })
            }
          })
    }
    },
    sreachProblem(){
      axios.post('/sreachProblem',{sreachcontent:this.searchcontent,user_token : localStorage.getItem("user_Token")}).then(response=>{
        this.tableData2.splice(0,this.tableData2.length);
        for (let i = 0; i < response.data.length; i++) {
            this.tableData2.push(response.data[i]);
          }
        this.oneortwo=false
      })
    },
    changeDifficulty(){
      axios.post('/changeDifficulty',{difficulty:this.difficulty}).then(response=>{
        this.tableData2.splice(0,this.tableData2.length);
        for (let i = 0; i < response.data.length; i++) {
            this.tableData2.push(response.data[i]);
          }
        this.oneortwo=false
      })
    },
},
}

</script>

<style>
.problems{
  width: 900px;
  margin: 55px auto;
}
.Allselect_suji{
  justify-items: center;
    width: 900px;
    background-color:#eee;
    
}
.srach1{
  background-image: url(../assets/search.svg);
  background-repeat: no-repeat;
  background-position: 10px 8px;
  height: 30px;
  padding-left: 30px;
  outline:none;
  border-radius: 3px;
  margin-left: 380px;
  border: 0px;
}
.random1{
  border: 0px;
  background-color: rgb(19, 190, 36);
  width: 85px;
  height: 24px;
  border-radius: 5px;
  margin-left: 120px;
  color: #fff;
  font-size: 14.3px;
}
.RankList{
  width: 900px;
  margin-bottom: 50px;
}
</style>